<template>
  <div class="knowledge-buckets">
    <el-row>
      <el-col :span="8" v-for="(bucket, index) in buckets" :key="index">
        <el-card shadow="hover" class="bucket-card">
          <div slot="header" class="bucket-header">{{ bucket.name }}</div>
          <div class="bucket-content">
            <el-tag
              v-for="(knowledge, index) in bucket.knowledgePoints"
              :key="index"
              class="knowledge-tag"
              >{{ knowledge }}</el-tag
            >
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: ["buckets"],
};
</script>

<style scoped>
.bucket-card {
  margin: 20px;
  height: 300px;
}

.bucket-header {
  font-size: 20px;
  font-weight: bold;
}

.bucket-content {
  margin-top: 20px;
}

.knowledge-tag {
  margin-right: 10px;
  margin-bottom: 10px;
}
</style>